<template>
  <div class="preview-container">
    <div class="preview-header">
      <h2>打印模板预览</h2>
      <div class="actions">
        <el-upload
          class="json-upload"
          accept=".json"
          :auto-upload="false"
          :show-file-list="false"
          :on-change="handleFileChange"
        >
          <el-button type="primary">导入JSON模板</el-button>
        </el-upload>
        <el-button 
          type="success" 
          :disabled="!isCanvasReady" 
          v-throttle-click
          @click="exportToPDF"
        >导出PDF</el-button>
        <el-button 
          type="primary" 
          :disabled="!isCanvasReady" 
          v-throttle-click
          @click="exportToImage"
        >导出图片</el-button>
        <!-- <el-button 
          type="primary" 
          @click="printInbound"
        >打印示例</el-button> -->
        <el-button  type="danger" @click="openPrinterSettings('ceshi_print_pdf')" v-throttle-click title="使用Electron打印服务">
          <el-icon><Printer /></el-icon> 静默打印PDF
        </el-button>
        <el-button  type="info" @click="openPrinterSettings('ceshi_print_image')" v-throttle-click title="将模板导出为图片并打印">
          <el-icon><Picture /></el-icon> 静默打印图片
        </el-button>
        <el-button  type="info" @click="openPrinterSettings('ceshi_print_barcode')" v-throttle-click title="将模板导出为图片并打印">
          <el-icon><Picture /></el-icon> 静默汉印标签打印
        </el-button>
      </div>
    </div>

    <div class="main-content">
      <!-- 左侧调试面板 -->
      <div v-if="isCanvasReady" class="debug-panel">
        <div class="panel-header">
          <h3>模板调试面板</h3>
          <el-button type="primary" size="small" @click="applyChanges">保存更改</el-button>
        </div>
        
        <div class="panel-content">
          <el-collapse v-model="activeCollapse">
            <!-- 常规字段编辑 -->
            <el-collapse-item title="文本字段" name="text">
              <div v-for="(obj, index) in textFields" :key="obj.fieldName" class="field-item">
                <div class="field-header">
                  <span class="field-label">{{ getFieldLabel(obj) }}</span>
                </div>
                <el-input
                  v-model="obj.contentValue"
                  :placeholder="getContentPlaceholder(obj)"
                ></el-input>
              </div>
            </el-collapse-item>
            
            <!-- 条形码字段编辑 -->
            <el-collapse-item title="条形码字段" name="barcode">
              <div v-for="(obj, index) in barcodeFields" :key="obj.fieldName" class="field-item">
                <div class="field-header">
                  <span class="field-label">{{ getFieldLabel(obj) }}</span>
                  <span class="field-info">字符长度: {{ getOriginalBarcodeLength(obj) }}</span>
                </div>
                <el-input
                  v-model="obj.barcodeValue"
                  placeholder="条形码内容"
                  :maxlength="getOriginalBarcodeLength(obj)"
                >
                  <template #append>
                    <el-tag 
                      :type="obj.barcodeValue.length === getOriginalBarcodeLength(obj) ? 'success' : 'danger'"
                      size="small"
                    >
                      {{ obj.barcodeValue.length }}/{{ getOriginalBarcodeLength(obj) }}
                    </el-tag>
                  </template>
                </el-input>
                <div class="field-warning" v-if="obj.barcodeValue.length !== getOriginalBarcodeLength(obj)">
                  <el-alert
                    type="warning"
                    :closable="false"
                    size="small"
                    show-icon
                  >
                    条形码字符长度必须为 {{ getOriginalBarcodeLength(obj) }} 个字符，否则可能导致显示异常
                  </el-alert>
                </div>
                <el-checkbox v-model="obj.displayValue">显示文本</el-checkbox>
              </div>
            </el-collapse-item>
            
            <!-- 表格数据编辑 -->
            <el-collapse-item title="表格数据" name="table">
              <div v-for="(obj, index) in tableFields" :key="obj.fieldName" class="field-item">
                <div class="field-header">
                  <span class="field-label">{{ getFieldLabel(obj) }}</span>
                  <span class="field-info">行数: {{ getTableData(obj).length }}</span>
                </div>
                
                <!-- 表格编辑界面 - 使用el-table -->
                <div class="table-editor">
                  <el-table
                    :data="getTableData(obj)"
                    border
                    stripe
                    size="small"
                    style="width: 100%"
                    max-height="400"
					class="main-table"
                  >
                    <!-- 动态表头列 -->
                    <el-table-column
                      v-for="header in getTableHeaders(obj)"
                      :key="header.key"
                      :prop="header.key"
                      :label="header.label"
                      :min-width="header.width ? (header.width * 3) + 'px' : '120px'"
                    >
                      <template #default="scope">
                        <el-input
                          v-model="scope.row[header.key]"
                          size="small"
                          placeholder="请输入内容"
                          class="cell-input"
                        ></el-input>
                      </template>
                    </el-table-column>
                    
                    <!-- 操作列 -->
                    <el-table-column 
                      label="操作" 
                      width="50"
                      fixed="right"
                      align="center"
                    >
                      <template #default="scope">
                        <el-button 
                          type="danger" 
                          size="small" 
                          circle
                          @click="removeTableRow(obj, scope.$index)"
                          title="删除行"
                        >
                          <el-icon><Delete /></el-icon>
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                  
                  <!-- 添加行按钮 -->
                  <div class="add-row-btn">
                    <el-button 
                      type="primary" 
                      size="small" 
                      @click="addTableRow(obj)"
                    >
                      <el-icon><Plus /></el-icon>添加行
                    </el-button>
                  </div>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
      
      <!-- 右侧画布容器 -->
      <div class="canvas-container-wrapper">
        <!-- 提示信息 -->
        <div v-if="!isCanvasReady" class="empty-prompt">
          <el-empty description="请导入JSON模板文件以预览内容">
            <el-upload
              class="json-upload-empty"
              accept=".json"
              :auto-upload="false"
              :show-file-list="false"
              :on-change="handleFileChange"
            >
              <el-button type="primary">选择JSON文件</el-button>
            </el-upload>
          </el-empty>
          
          <!-- 添加隐藏的canvas元素，确保引用始终可用 -->
          <div style="display: none;">
            <div ref="canvasWrapper" class="canvas-wrapper">
              <canvas ref="canvasElement" id="previewCanvas" width="600" height="800"></canvas>
            </div>
          </div>
        </div>

        <!-- 画布容器 -->
        <div v-else class="canvas-container">
          <div class="canvas-wrapper" ref="canvasWrapper">
            <canvas ref="canvasElement" id="previewCanvas"></canvas>
          </div>
        </div>
      </div>
    </div>

    <!-- 打印服务管理器 -->
    <PrintServiceManager 
      v-model:visible="showPrinterDialog"
      :button-key="currentButtonKey"
      @printer-change="handlePrinterChange"
    />
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, nextTick, computed, reactive } from 'vue';
import { ElMessage, ElLoading } from 'element-plus';
import { useRouter } from 'vue-router';
import { jsPDF } from 'jspdf';
import { Canvas, Textbox, Image, Group, Rect, Text, Line } from 'fabric';
import JsBarcode from 'jsbarcode';
import { Delete, Plus } from '@element-plus/icons-vue';
import CanvasRenderer from '@/print-sdk/canvasRenderer';
import PrintServiceManager from '@/components/print-server/PrintServiceManager.vue';

const showPrinterDialog = ref(false);
const currentButtonKey = ref('');

// 打开打印设置
const openPrinterSettings = (buttonKey) => {
  currentButtonKey.value = buttonKey;
  showPrinterDialog.value = true;
};
// 处理打印机变更
const handlePrinterChange = (printer, buttonKey) => {
  if(buttonKey == 'ceshi_print_pdf'){
    electronPrint()
  }else if(buttonKey == 'ceshi_print_image'){
    exportAndPrintImage()
  }else if(buttonKey == 'ceshi_print_barcode'){
    handlePrintBarcode()
  }
};
const router = useRouter();
const isCanvasReady = ref(false);
const templateName = ref('预览模板');
const activeCollapse = ref(['text', 'barcode', 'table']); // 默认展开所有面板

const sampleData = reactive({});
// 调试面板数据
const templateData = ref(null);
const textFields = ref([]);
const barcodeFields = ref([]);
const tableFields = ref([]);

// 表格编辑数据 - 存储表格数据的副本，用于编辑
const tableEditorData = ref({});

// Canvas引用
const canvasElement = ref(null);
const canvasWrapper = ref(null);
// 使用普通变量而不是ref
let fabricInstance = null;
const pxPerMmValue = ref(3.78); // 默认像素/毫米比例

// 毫米转像素
const mmToPx = (mm) => {
  if (!mm && mm !== 0) return 0;
  return mm * pxPerMmValue.value;
};

// 像素转毫米
const pxToMm = (px) => {
  if (!px && px !== 0) return 0;
  return px / pxPerMmValue.value;
};

// 使用Electron打印服务
const electronPrint = async () => {
  // 防止重复点击
  
  try {
    
    // 检查PrintService是否可用
    if (!window.PrintService) {
      ElMessage.error('打印服务未初始化，请先在系统设置中配置打印服务');
      return;
    }
    window.PrintService.setCanvasRenderer(canvasRenderer);
    // 使用全局PrintService
    await window.PrintService.printTemplate(
      templateData.value,
      sampleData,
      canvasElement.value,
      {
        copies: 1,
        width: templateData.value.canvas.width,
        height: templateData.value.canvas.height
      }
    );
  } catch (error) {
    console.error('打印失败:', error);
    ElMessage.error('打印失败: ' + (error.message || '未知错误'));
  } finally {
  }
};
const handlePrintBarcode = async () => {
  
  
  try {
    // 检查PrintService是否可用
    if (!window.PrintService) {
      ElMessage.error('打印服务未初始化，请先在系统设置中配置打印服务');
      return;
    }
    window.PrintService.setCanvasRenderer(canvasRenderer);
    
    // 使用全局PrintService
    await window.PrintService.printTemplateAsImage(
      templateData.value,
      sampleData,
      canvasElement.value,
      {
        copies: 1,//份数
        width: templateData.value.canvas.width,
        height: templateData.value.canvas.height,
        action:'directPrintImage',
        isLabelPrinter:true,
        // === 打印方向控制选项 ===
        landscape: false,
      }
    );
  } catch (error) {
    console.error('条形码打印失败:', error);
    ElMessage.error('条形码打印失败: ' + (error.message || '未知错误'));
  } finally {
  }
}
// 修改exportAndPrintImage方法
const exportAndPrintImage = async () => {
  // 防止重复点击
  
  try {
    
    // 检查PrintService是否可用
    if (!window.PrintService) {
      ElMessage.error('打印服务未初始化，请先在系统设置中配置打印服务');
      return;
    }
    window.PrintService.setCanvasRenderer(canvasRenderer);
    
    // 使用全局PrintService
    await window.PrintService.printTemplateAsImage(
      templateData.value,
      {},
      canvasElement.value,
      {
        copies: 1,
        width:templateData.value.canvas.width,
        height: templateData.value.canvas.height
      }
    );
  } catch (error) {
    console.error('图片打印失败:', error);
    ElMessage.error('图片打印失败: ' + (error.message || '未知错误'));
  } finally {
  }
};

// 获取字段标签
const getFieldLabel = (obj) => {
  try {
    // 检查是否为自定义文本
    if (obj.fieldName && obj.fieldName.startsWith('customTitle_')) {
      // 对于自定义文本，从initialData中提取当前的textTemplate作为标签
      if (obj.initialData) {
        const data = JSON.parse(obj.initialData);
        return `自定义文本: ${data.textTemplate || ''}`;
      }
      return '自定义文本';
    }
    
    // 普通字段处理
    if (obj.initialData) {
      const data = JSON.parse(obj.initialData);
      return data.label || obj.fieldName;
    }
  } catch (e) {
    console.error('解析字段标签失败:', e);
  }
  return obj.fieldName;
};

// 获取表格表头 - 使用副本数据
const getTableHeaders = (obj) => {
  try {
    const fieldName = obj.fieldName || obj.key;
    
    // 如果没有该表格的编辑数据，则初始化
    if (!tableEditorData.value[fieldName]) {
      // 从原始JSON中解析一次，创建副本
      if (obj.initialData) {
        const data = JSON.parse(obj.initialData);
        
        tableEditorData.value[fieldName] = {
          headers: data.headers || [],
          tableData: data.tableData || []
        };
      } else {
        tableEditorData.value[fieldName] = {
          headers: [],
          tableData: []
        };
      }
    }
    
    // 处理宽度，确保每个表头都有宽度值
    return tableEditorData.value[fieldName].headers.map(header => ({
      ...header,
      width: header.width || 35 // 默认宽度为35mm
    }));
  } catch (e) {
    console.error('获取表格表头失败:', e);
    return [];
  }
};

// 获取表格数据 - 使用副本数据而不是从JSON中解析
const getTableData = (obj) => {
  try {
    const fieldName = obj.fieldName || obj.key;
    
    // 如果没有该表格的编辑数据，则初始化
    if (!tableEditorData.value[fieldName]) {
      // 从原始JSON中解析一次，创建副本
      if (obj.initialData) {
        const data = JSON.parse(obj.initialData);
        
        // 确保tableData是一个数组
        if (!data.tableData) {
          data.tableData = [];
        }
        
        // 存储副本
        tableEditorData.value[fieldName] = {
          headers: data.headers || [],
          tableData: [...data.tableData] // 创建深拷贝
        };
      } else {
        // 如果没有初始数据，创建空数据
        tableEditorData.value[fieldName] = {
          headers: [],
          tableData: []
        };
      }
    }
    
    // 返回表格数据副本
    return tableEditorData.value[fieldName].tableData;
  } catch (e) {
    console.error('获取表格数据失败:', e);
    return [];
  }
};

// 添加表格行 - 直接操作副本数据
const addTableRow = (obj) => {
  try {
    const fieldName = obj.fieldName || obj.key;
    const tableData = tableEditorData.value[fieldName]?.tableData;
    const headers = tableEditorData.value[fieldName]?.headers;
    
    if (!tableData) {
      console.error('表格数据不存在');
      return;
    }
    
    // 创建新行，使用第一行作为模板或者创建空行
    const newRow = {};
    if (tableData.length > 0) {
      // 复制第一行的结构，但值为空
      Object.keys(tableData[0]).forEach(key => {
        newRow[key] = '';
      });
    } else if (headers && headers.length > 0) {
      // 使用表头来创建行
      headers.forEach(header => {
        newRow[header.key] = '';
      });
    }
    
    // 添加到tableData
    tableData.push(newRow);
    
    ElMessage.success('已添加新行');
  } catch (e) {
    console.error('添加表格行失败:', e);
    ElMessage.error('添加表格行失败');
  }
};

// 删除表格行 - 直接操作副本数据
const removeTableRow = (obj, rowIndex) => {
  try {
    const fieldName = obj.fieldName || obj.key;
    const tableData = tableEditorData.value[fieldName]?.tableData;
    
    if (tableData && tableData.length > rowIndex) {
      tableData.splice(rowIndex, 1);
      ElMessage.success('已删除该行');
    }
  } catch (e) {
    console.error('删除表格行失败:', e);
    ElMessage.error('删除表格行失败');
  }
};

// 同步表格编辑数据到原始对象
const syncTableDataToOriginal = () => {
  try {
    // 遍历所有表格字段
    tableFields.value.forEach(obj => {
      const fieldName = obj.fieldName || obj.key;
      
      // 获取该表格的编辑数据
      const editData = tableEditorData.value[fieldName];
      console.log('editData',editData);
      if (editData) {
        // 解析原始数据
        const originalData = JSON.parse(obj.initialData || '{}');
        
        // 更新表格数据
        originalData.tableData = [...editData.tableData]; // 创建深拷贝
        
        // 更新表头数据（如果有变化）

        if (editData.headers && editData.headers.length > 0) {
          originalData.headers = [...editData.headers];
        }
        
        // 更新回原始对象
        obj.initialData = JSON.stringify(originalData);
        sampleData[fieldName] = editData.tableData;
        console.log('渲染数据',sampleData);

      }
    });
    
    console.log('表格数据已同步到原始对象');
  } catch (e) {
    console.error('同步表格数据失败:', e);
  }
};

// 获取原始条形码长度
const getOriginalBarcodeLength = (obj) => {
  try {
    // 获取原始字符串长度
    const originalValue = obj.originalBarcodeValue || obj.barcodeValue;
    return originalValue.length;
  } catch (e) {
    console.error('获取条形码长度失败:', e);
    return 12; // 默认长度，可根据需要调整
  }
};

// 处理单元格数据变化
const handleCellDataChange = (obj) => {
  try {
    // 延迟更新画布，避免频繁重绘
    if (obj.updateTimer) {
      clearTimeout(obj.updateTimer);
    }
    
    obj.updateTimer = setTimeout(() => {
      updateCanvasTableData(obj);
    }, 300);
  } catch (e) {
    console.error('处理单元格数据变化失败:', e);
  }
};

// 更新画布中的表格数据
const updateCanvasTableData = (obj) => {
  if (!isCanvasReady.value || !fabricInstance) {
    return;
  }
  
  try {
    // 查找画布中对应的表格对象
    const canvasObjects = fabricInstance.getObjects();
    const tableObject = canvasObjects.find(canvasObj => 
      canvasObj.customType === 'table' && canvasObj.fieldName === obj.fieldName
    );
    
    if (!tableObject) {
      console.warn('未找到对应的表格对象:', obj.fieldName);
      return;
    }
    
    // 解析表格数据
    const fieldConfig = JSON.parse(obj.initialData);
    
    // 获取当前位置和尺寸信息
    const position = { x: obj.left, y: obj.top };
    const left = mmToPx(position.x);
    const top = mmToPx(position.y);
    
    // 移除旧的表格对象
    fabricInstance.remove(tableObject);
    
    // 表格配置
    const tableOptions = {
      key: fieldConfig.key,
      label: fieldConfig.label,
      type: fieldConfig.type,
      rows: fieldConfig.rows || 3,
      cols: fieldConfig.cols || 3,
      cellWidth: fieldConfig.cellWidth || 15,
      cellHeight: fieldConfig.cellHeight || 10,
      strokeColor: fieldConfig.strokeColor || '#000000',
      strokeWidth: fieldConfig.strokeWidth || 1,
      fieldName: obj.fieldName,
      width: obj.width,
      height: obj.height,
      // 表头相关配置
      hasHeader: fieldConfig.hasHeader === true,
      headerBackgroundColor: fieldConfig.headerBackgroundColor || '#f2f2f2',
      headerTextColor: fieldConfig.headerTextColor || '#333333',
      headerFontSize: fieldConfig.headerFontSize || 12,
      headerBold: fieldConfig.headerBold === true,
      headers: fieldConfig.headers || [],
      // 表格数据
      tableData: fieldConfig.tableData || []
    };
    
    // 创建新的表格对象
    addTable(left, top, tableOptions);
    
    // 重新渲染画布
    fabricInstance.renderAll();
  } catch (e) {
    console.error('更新画布表格失败:', e);
  }
};

// 获取列允许的最大字符数量
const getColumnMaxLength = (header) => {
  try {
    // 根据列宽计算允许的字符数量
    // 假设每个字符平均宽度为12像素，预留一些内边距
    const columnWidthPx = header.width * pxPerMmValue.value;
    
    // 计算大约可容纳的字符数，保守估计
    const maxChars = Math.floor((columnWidthPx - 20) / 7);
    
    // 设置最小和最大限制
    return Math.max(5, Math.min(maxChars, 50));
  } catch (e) {
    console.error('计算列最大长度失败:', e);
    return 30; // 默认值
  }
};

// 获取字段的内容占位符
const getContentPlaceholder = (obj) => {
  try {
    // 检查是否为自定义文本
    if (obj.fieldName && obj.fieldName.startsWith('customTitle_')) {
      return '请输入自定义文本内容';
    }
    
    // 查找字段标签
    const label = getFieldLabel(obj);
    return `请输入${label}内容`;
  } catch (e) {
    return '请输入内容';
  }
};

// 初始化文本字段时设置内容值，为自定义文本设置默认值
const initTextFieldContents = () => {
  textFields.value.forEach(field => {
    try {
      // 检查是否为自定义文本
      if (field.fieldName && field.fieldName.startsWith('customTitle_')) {
        // 从initialData中提取当前的textTemplate作为初始值
        if (field.initialData) {
          const data = JSON.parse(field.initialData);
          field.contentValue = data.textTemplate || '';
        } else {
          field.contentValue = '';
        }
      } else {
        // 普通文本字段设空值
        field.contentValue = '';
      }
    } catch (e) {
      console.error('初始化文本字段内容失败:', e);
      field.contentValue = '';
    }
  });
};

// 应用内容值到模板
const applyContentValues = () => {
  textFields.value.forEach(field => {
    try {
      const template = field.textTemplate || '';
      // 仅当输入了内容值时替换
      if (field.contentValue) {
        // 保存要替换的值
        field.replacementValue = field.contentValue;
        sampleData[field.fieldName] = field.replacementValue;
      }
      console.log('field',field);
    } catch (e) {
      console.error('应用内容值失败:', e);
    }
  });
};

// 处理字段被选中事件（从useCanvas.js复制并修改）
const handleFieldSelected = (fieldConfig) => {
  console.log('处理字段选择事件:', fieldConfig);

  try {
    // 检查canvas是否已初始化
    if (!fabricInstance) {
      console.error('画布未初始化，无法添加字段');
      return;
    }

    // 获取字段位置坐标，转换为像素
    const position = fieldConfig.position || { x: 20, y: 20 };
    const left = mmToPx(position.x);
    const top = mmToPx(position.y);

    console.log(`添加字段 ${fieldConfig.key} 到位置 (${left}, ${top}), 类型: ${fieldConfig.type}`);

    if (fieldConfig.type === 'barcode') {
      console.log('添加条形码字段:', fieldConfig);

      try {
        // 从设计器模式传入实际条码值
        const sampleContent = fieldConfig.sampleContent || '1234567890'; // 默认内容
        const actualContent = fieldConfig.barcodeValue || sampleContent;

        console.log(`添加条形码: "${actualContent}", 宽度=${fieldConfig.width || 60}mm, 高度=${fieldConfig.height || 15}mm`);

        // 检查条形码是否应显示边框
        const border = fieldConfig.border || { show: false };
        
        addBarcode(actualContent, left, top, {
          width: fieldConfig.width || 60,
          height: fieldConfig.height || 15,
          format: fieldConfig.barcodeFormat || 'CODE128',
          displayValue: fieldConfig.displayValue !== false,
          fieldName: fieldConfig.key,
          originX: 'left',
          originY: 'top',
          border: border, // 将边框设置传递给addBarcode
          textTemplate: fieldConfig.textTemplate || '${data}',
          customData: { ...fieldConfig }
        }).then(barcodeObj => {
          console.log(`条形码 ${fieldConfig.label} 添加成功:`, barcodeObj);
        }).catch(error => {
          console.error(`条形码添加失败:`, error);
          ElMessage.error(`添加条形码 ${fieldConfig.label} 失败: ${error.message}`);
        });
      } catch (error) {
        console.error(`添加条形码失败:`, error);
        ElMessage.error(`添加条形码 ${fieldConfig.label} 失败: ${error.message}`);
      }

      return;
    } else if (fieldConfig.type === 'line') {
      addLine(left, top, fieldConfig);
      return;
    } else if (fieldConfig.type === 'table') {
      // 添加表格字段
      try {
        console.log('添加表格字段:', fieldConfig.key, fieldConfig.label);
        
        // 调试输出表格数据信息
        console.log('表格数据内容:', JSON.stringify(fieldConfig).substring(0, 100) + '...');
        
        // 检查表格数据结构
        const tableHeaders = fieldConfig.headers || [];
        const tableData = fieldConfig.tableData || [];
        
        console.log(`表格 ${fieldConfig.key}:`, tableHeaders.length, '列,', tableData.length, '行');
        console.log('表头:', tableHeaders);
        console.log('数据示例:', tableData.length > 0 ? tableData[0] : '无数据');
        
        // 获取表格配置参数
        const tableOptions = {
          key: fieldConfig.key,
          label: fieldConfig.label,
          type: fieldConfig.type,
          rows: fieldConfig.rows || 3,
          cols: fieldConfig.cols || 3,
          cellWidth: fieldConfig.cellWidth || 15,
          cellHeight: fieldConfig.cellHeight || 10,
          strokeColor: fieldConfig.strokeColor || '#000000',
          strokeWidth: fieldConfig.strokeWidth || 1,
          fieldName: fieldConfig.key,
          width: fieldConfig.width,
          height: fieldConfig.height,
          // 表头相关配置
          hasHeader: fieldConfig.hasHeader === true,
          headerBackgroundColor: fieldConfig.headerBackgroundColor || '#f2f2f2',
          headerTextColor: fieldConfig.headerTextColor || '#333333',
          headerFontSize: fieldConfig.headerFontSize || 12,
          headerBold: fieldConfig.headerBold === true,
          headers: tableHeaders,
          // 表格数据
          tableData: tableData
        };
        
        // 调用addTable函数创建表格
        const tableObj = addTable(left, top, tableOptions);
        
        if (tableObj) {
          console.log(`表格 ${fieldConfig.key} 添加成功`);
        } else {
          console.error(`表格添加失败`);
        }
      } catch (tableErr) {
        console.error('添加表格时出错:', tableErr);
        ElMessage.error(`添加表格 ${fieldConfig.label} 失败: ${tableErr.message}`);
      }
      
      return;
    } else if (fieldConfig.type === 'text') {
      // 添加文本字段，使用修改后的textTemplate作为显示内容
      try {
        console.log('添加文本字段:', fieldConfig);
        
        // 使用更新后的textTemplate，已经进行过占位符替换
        const displayText = fieldConfig.textTemplate || `${fieldConfig.label}: ${fieldConfig.key}`;

        console.log('显示文本:', displayText);

        // 边框设置
        const borderOptions = fieldConfig.border || {
          show: true,           // 默认显示边框
          color: '#333333',     // 默认边框颜色
          width: 1,             // 默认边框宽度
          dashArray: null,      // 默认实线
          padding: 8,           // 默认8像素的内边距
          // 添加方向控制
          top: fieldConfig.border?.top === true,
          right: fieldConfig.border?.right === true,
          bottom: fieldConfig.border?.bottom === true,
          left: fieldConfig.border?.left === true
        };

        // 字体大小
        const fontSize = fieldConfig.style ? fieldConfig.style.fontSize : 14;

        // 使用更新后的addText方法添加文本字段
        addText(displayText, left, top, {
          fontSize: fontSize,
          fontWeight: fieldConfig.style && fieldConfig.style.bold ? 'bold' : 'normal',
          fill: fieldConfig.style ? fieldConfig.style.color : '#000000',
          width: mmToPx(fieldConfig.width),
          customHeight: mmToPx(fieldConfig.height),
          originX: 'left',
          originY: 'top',
          border: borderOptions,
          customType: 'field',
          fieldName: fieldConfig.key,
          fieldType: 'text',
          textTemplate: fieldConfig.textTemplate,
          customData: { ...fieldConfig },
          autoWidth: true
        });

        console.log(`文本字段 ${fieldConfig.key} 已添加到画布，使用模板: ${fieldConfig.textTemplate}`);
      } catch (textErr) {
        console.error('添加文本字段时出错:', textErr);
      }
    }
  } catch (error) {
    console.error('添加字段到画布时出错:', error);
    console.error('错误详情:', error.message);
    console.error('错误堆栈:', error.stack);
    // 显示错误提示
    ElMessage.error(`添加字段失败: ${error.message}`);
  }
};

// 修改初始化画布方法
const initCanvas = async (width, height, pxPerMm = 3.78) => {
  try {
    // 等待下一个DOM更新周期确保引用已更新
    await nextTick();
    
    // 确保canvas元素存在
    if (!canvasElement.value) {
      console.error('找不到canvas元素');
      return false;
    }
    
    // 使用canvasRenderer初始化画布 - 直接传递DOM元素
    const result = await canvasRenderer.initCanvas(canvasElement.value, width, height, pxPerMm, false);
    
    // 设置fabricInstance引用
    if (result) {
      fabricInstance = canvasRenderer.fabricInstance;
      // 存储pxPerMm值供后续使用
      pxPerMmValue.value = canvasRenderer.pxPerMmValue;
    }
    
    return result;
  } catch (error) {
    console.error('初始化画布失败:', error);
    ElMessage.error('初始化画布失败: ' + error.message);
    return false;
  }
};

// 添加文本对象
const addText = (text, left, top, options = {}) => {
  try {
    // 默认设置
    const fontSize = options.fontSize || 16;
    const customHeight = options.customHeight || mmToPx(15);
    const fontWeight = options.fontWeight || 'normal';
    const fill = options.fill || '#000000';
    let width = options.width || mmToPx(30);

    // 自动宽度处理
    if (options.autoWidth === true) {
        // 创建临时DOM元素计算文本宽度
        const tempElement = document.createElement('span');
        tempElement.style.visibility = 'hidden';
        tempElement.style.position = 'absolute';
        tempElement.style.fontSize = `${fontSize}px`;
        tempElement.style.fontWeight = fontWeight;
        tempElement.style.whiteSpace = 'nowrap';
        tempElement.textContent = text;
        document.body.appendChild(tempElement);
        
        // 获取文本宽度并增加一些额外空间
        const textWidth = tempElement.offsetWidth;
        width = textWidth * 1.1; // 增加10%的空间，避免文本被截断
        
        // 设置最小宽度
        width = Math.max(width, mmToPx(10));

        // 清理临时元素
        document.body.removeChild(tempElement);

      }
    // 创建文本对象
    const textObj = new Textbox(text, {
      left: Math.round(left),
      top: Math.round(top),
      fontSize,
      fontWeight,
      fill,
      width,
      height: customHeight,
      originX: options.originX || 'center',
      originY: options.originY || 'center',
      editable: false,
      selectable: false,
      borderColor: '#5E9ED6',
      cornerColor: '#5E9ED6',
      cornerSize: 6,
      transparentCorners: false,
      lockRotation: true,
      // 添加多行文本支持
      breakWords: true,       // 允许在单词之间换行
      textAlign: 'left',      // 文本左对齐
      lineHeight: 1.2,        // 行高
      charSpacing: 0,         // 字符间距
      minWidth: 20,           // 最小宽度
      // 启用文本换行功能
      isWrapping: true,       // 启用文本自动换行 
      splitByGrapheme: false, // 按字符拆分而不是按单词拆分
      styles: {},             // 初始化样式对象
      fieldName: options.fieldName || '',
      fieldType: options.fieldType || 'text',
      textTemplate: options.textTemplate || '',
      customData: options.customData || {}  
    });

    // 添加自定义类型标识
    textObj.customType = options.customType || 'text';

    // 添加到画布
    fabricInstance.add(textObj);
    fabricInstance.renderAll();

    console.log('成功添加文本对象:', textObj);
    return textObj;
  } catch (error) {
    console.error('添加文本时出错:', error);
    return null;
  }
};

// 添加表格对象
const addTable = (left, top, options = {}) => {
  try {
    console.log('添加表格，参数:', options);
    // 创建表格对象的数组
    const groupObjects = [];
    
    // 获取表格设置
    const headers = options.headers || [];
    const rows = options.tableData || [];
    
    // 修正表格缩放比例
    const pxPerMm = pxPerMmValue.value;
    
    // 计算单元格高度 - 使用直接的pxPerMm比例
    const cellHeight = (options.cellHeight || 10) * pxPerMm;
    const strokeColor = options.strokeColor || '#000000';
    const strokeWidth = options.strokeWidth || 1;
    
    console.log(`表格单元格高度: ${cellHeight}px, 行数: ${rows.length}, 列数: ${headers.length}`);
    
    // 计算表格总宽度和每列的像素宽度
    let totalWidth = 0;
    const columnWidths = [];
    headers.forEach(header => {
      // 直接使用pxPerMm进行转换，不再除以任何比例
      const pixelWidth = header.width * pxPerMm;
      columnWidths.push(pixelWidth);
      totalWidth += pixelWidth;
    });
    
    console.log('表格列宽(像素):', columnWidths);
    
    // 绘制表头
    let currentX = 0;
    headers.forEach((header, index) => {
      // 绘制表头单元格
      const cellRect = new Rect({
        left: currentX,
        top: 0,
        width: columnWidths[index],
        height: cellHeight,
        fill: '#fff',
        stroke: strokeColor,
        strokeWidth: strokeWidth
      });
     
      
      // 绘制表头文本
      const headerText = new Text(header.label, {
        left: currentX + columnWidths[index] / 2,
        top: cellHeight / 2,
        fontFamily: 'Arial',
        fontSize: options.headerFontSize || 12,
        fontWeight: options.headerBold ? 'bold' : 'normal',
        fill: options.headerTextColor || '#000000',
        originX: 'center',
        originY: 'center',
        selectable: false
      });
      
      // 添加到对象数组
      groupObjects.push(cellRect);
      groupObjects.push(headerText);
      
      currentX += columnWidths[index];
    });
    
    // 绘制数据行
    rows.forEach((row, rowIndex) => {
      currentX = 0;
      const rowY = (rowIndex + 1) * cellHeight;
      
      headers.forEach((header, index) => {
        // 绘制单元格
        const cellRect = new Rect({
          left: currentX,
          top: rowY,
          width: columnWidths[index],
          height: cellHeight,
          fill: '#ffffff',
          stroke: strokeColor,
          strokeWidth: strokeWidth
        });
        
        // 计算单元格内文本字体大小 - 确保清晰可读
        const cellFontSize = Math.min(14, cellHeight * 0.5);
        
        // 获取单元格文本内容，确保转换为字符串
        const cellContent = (row[header.key] !== undefined && row[header.key] !== null) 
          ? String(row[header.key]) 
          : '';
        
        // 绘制单元格文本
        const cellText = new Text(cellContent, {
          left: currentX + columnWidths[index] / 2,
          top: rowY + cellHeight / 2,
          fontFamily: 'Arial',
          fontSize: cellFontSize,
          fill: '#000000',
          originX: 'center',
          originY: 'center',
          textAlign: 'center',
          selectable: false
        });
        
        // 添加到对象数组
        groupObjects.push(cellRect);
        groupObjects.push(cellText);
        
        currentX += columnWidths[index];
      });
    });
    
    // 创建表格组，直接传入所有对象数组
    const tableGroup = new Group(groupObjects, {
      left: left,
      top: top,
      selectable: false
    });
    
    // 设置自定义属性
    tableGroup.customType = 'table';
    tableGroup.fieldName = options.fieldName;
    
    // 添加到画布
    fabricInstance.add(tableGroup);
    fabricInstance.renderAll();
    
    return tableGroup;
  } catch (error) {
    console.error('创建表格对象失败:', error, options);
    return null;
  }
};

// 添加线条对象
const addLine = (left, top, options = {}) => {
  try {
    const lineArray = [];
    // 计算线条长度
    options.Line.forEach(item => {  
      if(item > 0) {
        item = mmToPx(item);
      }
      lineArray.push(item);
    });

    const time = new Date().getTime();
    const key = options.key + '_' + time;

    const line = new Line(lineArray, {
      left: Math.round(left),
      top: top,
      stroke: options.stroke || '#000000',
      strokeWidth: options.strokeWidth || 1,
      strokeDashArray: options.strokeDashArray || null,
      originX: options.originX || 'left',
      originY: options.originY || 'center',
      selectable: false
    });
    
    // 设置自定义属性
    line.customType = options.customType || 'horizontalLine';
    line.fieldName = key || '';
    
    // 添加到画布
    fabricInstance.add(line);
    fabricInstance.renderAll();
    
    return line;
  } catch (error) {
    console.error('添加线条时出错:', error);
    return null;
  }
};

// 添加条形码对象
const addBarcode = async (value, left, top, options = {}) => {
  try {
    // 创建临时canvas用于生成条形码
    const tempCanvas = document.createElement('canvas');
    tempCanvas.width = 800;
    tempCanvas.height = 200;
    tempCanvas.style.display = 'none';
    document.body.appendChild(tempCanvas);

    // 设置条形码内容
    const content = value || "1234567890";

    // 固定条形码整体宽度（毫米）和高度（毫米）
    const barcodeWidthMM = options.width || 60;
    const barcodeHeightMM = options.height || 15;

    // 转换为像素
    const barcodeWidthPx = mmToPx(barcodeWidthMM);
    const barcodeHeightPx = mmToPx(barcodeHeightMM);

    // 根据内容长度动态计算条宽度
    const moduleWidth = 2;
    const margin = 10;

    // 生成条形码
    JsBarcode(tempCanvas, content, {
      format: options.format || 'CODE128',
      width: moduleWidth,
      height: barcodeHeightPx - 30,
      displayValue: options.displayValue !== false,
      fontSize: 14,
      textMargin: 5,
      margin: margin,
      background: '#FFFFFF',
      lineColor: '#000000'
    });

    // 获取图像数据
    const dataUrl = tempCanvas.toDataURL('image/png');
    document.body.removeChild(tempCanvas);

    // 创建一个Promise并返回，以处理异步图像加载
    return new Promise((resolve, reject) => {
      Image.fromURL(dataUrl)
        .then(img => {
          if (!img) {
            reject(new Error('创建条形码图片对象失败'));
            return;
          }

          // 计算缩放比例，确保宽度为目标宽度
          const scaleX = barcodeWidthPx / img.width;
          const scaleY = barcodeHeightPx / img.height;

          // 边框设置
          const hasBorder = options.border && options.border.show;
          
          // 设置图片属性
          img.set({
            left: Math.round(left),
            top: Math.round(top),
            scaleX: scaleX,
            scaleY: scaleY,
            originX: options.originX || 'left',
            originY: options.originY || 'top',
            selectable: false,
            stroke: hasBorder ? (options.border.color || '#000000') : undefined,
            strokeWidth: hasBorder ? (options.border.width || 0) : 0,
            strokeDashArray: hasBorder && options.border.dashArray ? options.border.dashArray : null
          });

          // 设置自定义属性
          img.customType = 'barcode';
          img.barcodeValue = content;
          img.barcodeFormat = options.format || 'CODE128';
          img.displayValue = options.displayValue !== false;
          img.fieldName = options.fieldName || '';
          img.fieldType = 'barcode';
          img.textTemplate = options.textTemplate || '${data}';
          img.border = options.border || { show: false };

          // 添加到画布
          fabricInstance.add(img);
          fabricInstance.renderAll();

          resolve(img);
        })
        .catch(error => {
          console.error('加载条形码图片失败:', error);
          reject(error);
        });
    });
  } catch (error) {
    console.error('添加条形码时出错:', error);
    return Promise.reject(error);
  }
};

// 创建canvasRenderer实例
const canvasRenderer = new CanvasRenderer();

// 替换现有的handleFileChange方法
const handleFileChange = async (file) => {
  if (!file) {
    ElMessage.warning('请选择有效的模板文件');
    return;
  }

  try {
    console.log('开始处理文件变更:', file.name);
    
    // 读取文件内容
    const fileContent = await new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onload = (e) => resolve(e.target.result);
      reader.onerror = (e) => reject(e);
      reader.readAsText(file.raw || file);
    });
    
    console.log('文件内容已读取，长度:', fileContent.length);
    
    // 尝试解析JSON
    let jsonData;
    try {
      jsonData = JSON.parse(fileContent);
      templateData.value = jsonData;
      console.log('JSON解析成功，对象结构:', Object.keys(jsonData));
      
      // 检查JSON数据有效性
      if (!jsonData.objects || !Array.isArray(jsonData.objects)) {
        throw new Error('JSON数据无效: 缺少objects数组');
      }
      
      console.log('JSON数据有效，包含', jsonData.objects.length, '个对象');
    } catch (jsonError) {
      console.error('JSON解析失败:', jsonError);
      ElMessage.error('解析模板文件失败: ' + jsonError.message);
      return;
    }
    
    // 等待下一个DOM更新周期确保引用已更新
    await nextTick();
    
    // 显示加载状态
    const loadingInstance = ElLoading.service({
      text: '正在加载模板...',
      background: 'rgba(0, 0, 0, 0.7)'
    });
    
    try {
      // 尝试直接从DOM获取canvas元素
      let canvasEl = canvasElement.value;
      
      console.log('检查canvas元素:', canvasEl ? '找到元素' : '未找到元素');
      
      // 如果通过ref引用没有找到元素，尝试通过选择器查找
      if (!canvasEl) {
        console.log('尝试通过选择器查找canvas元素');
        // 尝试在canvasWrapper内查找canvas元素
        if (canvasWrapper.value) {
          const canvasInWrapper = canvasWrapper.value.querySelector('canvas');
          if (canvasInWrapper) {
            console.log('在wrapper中找到canvas元素');
            canvasEl = canvasInWrapper;
          }
        }
        
        // 如果仍未找到，作为最后尝试，直接在文档中查找
        if (!canvasEl) {
          const allCanvases = document.querySelectorAll('canvas');
          console.log('文档中共找到canvas元素数量:', allCanvases.length);
          if (allCanvases.length > 0) {
            canvasEl = allCanvases[0];
            console.log('使用文档中的第一个canvas元素');
          }
        }
      }
      
      // 最终检查
      if (!canvasEl) {
        console.error('无法找到有效的canvas元素');
        ElMessage.error('找不到canvas元素，请确保页面已完全加载');
        loadingInstance.close();
        return;
      }
      
      console.log('准备渲染JSON到canvas元素');
      
      // 确保canvas元素有宽度和高度
      if (!canvasEl.width || !canvasEl.height) {
        console.log('设置canvas初始尺寸为600x800');
        canvasEl.width = 600;
        canvasEl.height = 800;
      }
      
      // 获取画布尺寸信息
      const canvasWidth = jsonData.canvas?.width || 210; // 默认A4宽度
      const canvasHeight = jsonData.canvas?.height || 297; // 默认A4高度
      const pxPerMm = jsonData.canvas?.pxPerMm || 3.78;
      
      console.log(`画布尺寸: ${canvasWidth}mm x ${canvasHeight}mm, 像素比: ${pxPerMm}`);
      
      // 确保Canvas元素是可见的
      isCanvasReady.value = true;
      await nextTick();
      
      // 手动调用initCanvas方法先初始化画布
      const canvasInitialized = await initCanvas(canvasWidth, canvasHeight, pxPerMm);
      
      if (!canvasInitialized) {
        throw new Error('无法初始化画布');
      }
      
      console.log('画布已初始化，fabric实例是否可用:', !!fabricInstance);
      
      // 渲染JSON数据到画布
      const renderResult = await canvasRenderer.renderFromJSON(jsonData);
      
      if (!renderResult) {
        throw new Error('渲染JSON数据失败');
      }
      
      console.log('JSON数据渲染成功');
      
      // 提取字段数据
      canvasRenderer.extractFields(jsonData);
      const fieldsData = canvasRenderer.getFieldsData();
      
      // 更新字段数据
      textFields.value = fieldsData.textFields;
      barcodeFields.value = fieldsData.barcodeFields;
      tableFields.value = fieldsData.tableFields;
      Object.assign(tableEditorData.value, fieldsData.tableEditorData);
      
      // 初始化文本字段内容
      initTextFieldContents();
      
      // 更新模板名称
      templateName.value = jsonData.title || '预览模板';
      
      console.log('模板渲染和数据提取完成');
      
      // 更新UI状态
      isCanvasReady.value = true;
      ElMessage.success('模板加载成功');
    } catch (error) {
      console.error('渲染模板失败:', error);
      isCanvasReady.value = false;
      ElMessage.error('渲染模板失败: ' + (error.message || '未知错误'));
    } finally {
      // 关闭加载提示
      loadingInstance.close();
    }
  } catch (error) {
    console.error('处理文件变更失败:', error);
    isCanvasReady.value = false;
    ElMessage.error('加载模板失败: ' + (error.message || '未知错误'));
  }
};

// 修改应用更改到画布函数，保持原有元素的层级顺序
const applyChanges = async () => {
  if (!isCanvasReady.value || !fabricInstance) {
    ElMessage.warning('画布未准备好');
    return;
  }
  
  // 先应用内容值到模板
  applyContentValues();
  
  // 同步表格编辑数据到原始对象
  syncTableDataToOriginal();
  
  // 验证条形码长度
  let hasInvalidBarcode = false;
  for (const obj of barcodeFields.value) {

    if (obj.barcodeValue.length !== getOriginalBarcodeLength(obj)) {
      hasInvalidBarcode = true;
      sampleData[obj.fieldName] = obj.barcodeValue;
      break;
    }
  }
  
  if (hasInvalidBarcode) {
    // 显示确认对话框
    if (!confirm('存在条形码字符长度不匹配，可能导致显示异常。是否继续？')) {
      return;
    }
  }
  
  try {
    const loadingInstance = ElLoading.service({
      text: '正在应用更改...',
      background: 'rgba(0, 0, 0, 0.7)'
    });
    
    // 获取画布中所有对象的原始顺序
    const originalObjects = fabricInstance.getObjects();
    
    // 记录原始对象的字段名和顺序
    const objectOrder = [];
    originalObjects.forEach(obj => {
      if (obj.fieldName) {
        objectOrder.push({
          fieldName: obj.fieldName,
          type: obj.customType || obj.type
        });
      }
    });
    
    console.log('保存了对象顺序:', objectOrder);
    
    // 完全清空画布
    fabricInstance.clear();
    
    // 直接设置背景色属性
    fabricInstance.backgroundColor = '#FFFFFF';
    
    // 重置画布变换矩阵以避免残留效果
    fabricInstance.setViewportTransform([1, 0, 0, 1, 0, 0]);
    
    // 等待一小段时间确保画布已完全清空
    await new Promise(resolve => setTimeout(resolve, 50));
    
    // 准备所有对象数据，但不立即添加到画布
    const objectsToAdd = [];

    // 重新加载模板，但使用更新后的内容
    for (const obj of [...textFields.value, ...barcodeFields.value, ...tableFields.value]) {
      try {
        // 解析初始化数据
        const fieldConfig = JSON.parse(obj.initialData);
        
        // 添加位置信息
        fieldConfig.position = { x: obj.left, y: obj.top };
        fieldConfig.width = obj.width;
        fieldConfig.height = obj.height;
        fieldConfig.type = obj.type;
        fieldConfig.key = obj.fieldName;
        
        // 如果是文本字段，更新文本模板内容
        if (obj.type === 'text') {
          // 检查是否为自定义文本(customTitle)
          const isCustomTitle = obj.fieldName && obj.fieldName.startsWith('customTitle_');
          
          if (isCustomTitle && obj.contentValue) {
            // 自定义文本直接使用输入的内容作为textTemplate
            fieldConfig.textTemplate = obj.contentValue;
            console.log(`自定义文本 ${obj.fieldName} 的内容已更新为:`, obj.contentValue);
          } else if (obj.replacementValue) {
            // 普通文本字段，保留原始模板结构，但替换${data}为实际输入值
            const template = fieldConfig.textTemplate || '';
            fieldConfig.textTemplate = template.replace(/\${data}/g, obj.replacementValue);
          } else {
            fieldConfig.textTemplate = obj.textTemplate;
          }
        }
        
        // 如果是条形码，更新条形码相关属性
        if (obj.type === 'barcode') {
          fieldConfig.barcodeValue = obj.barcodeValue;
          fieldConfig.displayValue = obj.displayValue;
          // 强制设置为无边框，解决边框问题
          fieldConfig.border = { show: false };
          console.log('条码边框已禁用:', fieldConfig.border);
        }
        
        // 处理表格数据
        if (obj.type === 'table') {
          // 表格数据已经同步到initialData中
          // 在添加到画布前对数据进行截断处理
          truncateTableCellContents(fieldConfig);
        }
        
        // 存储对象和配置，稍后按原始顺序添加
        objectsToAdd.push({
          fieldConfig: fieldConfig,
          originalObj: obj
        });
      } catch (error) {
        console.error('处理对象失败:', error, obj);
      }
    }
    
    // 按原始顺序添加对象到画布
    // 先添加原顺序中不存在的对象（可能是新增的）
    const addedFieldNames = new Set();
    
    console.log('开始按原始顺序添加对象');
    
    // 第一步：按照原始顺序添加对象
    for (const orderInfo of objectOrder) {
      const matchObj = objectsToAdd.find(item => 
        item.originalObj.fieldName === orderInfo.fieldName && 
        (item.originalObj.type === orderInfo.type || item.originalObj.customType === orderInfo.type)
      );
      
      if (matchObj) {
        await handleFieldSelected(matchObj.fieldConfig);
        addedFieldNames.add(matchObj.originalObj.fieldName);
        console.log(`按原顺序添加: ${matchObj.originalObj.fieldName}`);
      }
    }
    
    // 第二步：添加任何未包含在原始顺序中的新对象
    for (const objToAdd of objectsToAdd) {
      if (!addedFieldNames.has(objToAdd.originalObj.fieldName)) {
        await handleFieldSelected(objToAdd.fieldConfig);
        console.log(`添加新对象: ${objToAdd.originalObj.fieldName}`);
      }
    }
    
    // 最终渲染画布以确保所有对象显示正确
    fabricInstance.renderAll();
    
    loadingInstance.close();
    ElMessage.success('更改已应用');
  } catch (error) {
    console.error('应用更改失败:', error);
    ElMessage.error('应用更改失败: ' + error.message);
  }
};

// 截断表格单元格内容，确保适应单元格宽度
const truncateTableCellContents = (fieldConfig) => {
  try {
    if (!fieldConfig.headers || !fieldConfig.tableData) return;
    
    // 计算每列的最大字符数
    const columnMaxCharCounts = {};
    
    // 根据列宽计算每列最大字符数
    fieldConfig.headers.forEach(header => {
      const columnWidth = header.width || 35; // 默认宽度35mm
      // 估算每列可容纳的字符数 (保守估计，留出边距)
      const maxChars = Math.floor((columnWidth * pxPerMmValue.value - 20) / 7);
      columnMaxCharCounts[header.key] = Math.max(5, Math.min(maxChars, 50));
    });
    
    // 对表格数据每个单元格内容进行截断
    fieldConfig.tableData.forEach(row => {
      for (const key in row) {
        if (row[key] && columnMaxCharCounts[key]) {
          const maxLength = columnMaxCharCounts[key];
          // 如果内容超过最大长度，进行截断
          if (row[key].length > maxLength) {
            row[key] = row[key].substring(0, maxLength);
          }
        }
      }
    });
  } catch (e) {
    console.error('截断表格内容失败:', e);
  }
};

// 打印示例方法
const printInbound = async () => {
  router.push('/configuration/print-management/preview/print-template');
};

// 修改导出图片函数
const exportToImage = async () => {
  if (!isCanvasReady.value) {
    ElMessage.warning('请先加载模板');
    return;
  }
  
  try {
    // 使用优化后的导出图片方法
    await canvasRenderer.exportToImage(templateName.value, {
      onSuccess: () => {
        ElMessage.success('导出图片成功');
      },
      onError: (error) => {
        ElMessage.error('导出图片失败: ' + (error.message || '未知错误'));
      },
      onLoading: (loading, message) => {
        if (loading) {
          ElLoading.service({
            text: message,
            background: 'rgba(0, 0, 0, 0.7)'
          });
        } else {
          const loadingInstances = document.querySelectorAll('.el-loading-mask');
          loadingInstances.forEach(instance => instance.remove());
        }
      }
    });
  } catch (error) {
    console.error('导出图片失败:', error);
    ElMessage.error('导出图片失败: ' + (error.message || '未知错误'));
  }
};

// 修改导出PDF函数
const exportToPDF = async () => {
  if (!isCanvasReady.value) {
    ElMessage.warning('请先加载模板');
    return;
  }
  
  try {
    // 使用优化后的导出PDF方法
    await canvasRenderer.exportToPDF(templateName.value, {
      onSuccess: () => {
        ElMessage.success('导出PDF成功');
      },
      onError: (error) => {
        ElMessage.error('导出PDF失败: ' + (error.message || '未知错误'));
      },
      onLoading: (loading, message) => {
        if (loading) {
          ElLoading.service({
            text: message,
            lock: true,
            background: 'rgba(0, 0, 0, 0.7)',
            customClass: 'pdf-export-loading'
          });
        } else {
          const loadingInstances = document.querySelectorAll('.el-loading-mask');
          loadingInstances.forEach(instance => instance.remove());
        }
      }
    });
  } catch (error) {
    console.error('导出PDF失败:', error);
    ElMessage.error('导出PDF失败: ' + (error.message || '未知错误'));
  }
};

// 组件挂载时初始化
onMounted(() => {
  console.log('预览页面组件已挂载');
  
  // 检查canvas元素是否已正确绑定
  nextTick(() => {
    console.log('nextTick检查canvas元素:', canvasElement.value ? '已找到' : '未找到');
    if (canvasWrapper.value) {
      console.log('Canvas包装器已找到，尺寸:', 
        canvasWrapper.value.clientWidth + 'x' + canvasWrapper.value.clientHeight);
    }
    
    // 检查页面中的所有canvas元素
    const allCanvases = document.querySelectorAll('canvas');
    console.log('文档中共找到canvas元素数量:', allCanvases.length);
    allCanvases.forEach((canvas, index) => {
      console.log(`Canvas #${index} 尺寸:`, canvas.width + 'x' + canvas.height);
    });
  });
});

// 组件卸载前清理资源
onBeforeUnmount(() => {
  console.log('预览页面组件即将卸载');
  
  if (fabricInstance) {
    try {
      // 解绑事件监听
      fabricInstance.off();
      // 清空画布
      fabricInstance.clear();
      // 销毁画布实例
      fabricInstance.dispose();
      fabricInstance = null;
    } catch (error) {
      console.error('清理画布时发生错误:', error);
    }
  }
});
</script>

<style lang="scss" scoped>
.preview-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  background-color: #f5f5f5;
  
  .preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    border-bottom: 1px solid #e6e6e6;
    background-color: #fff;
    
    h2 {
      margin: 0;
      font-size: 18px;
      color: #333;
    }
    
    .actions {
      display: flex;
      gap: 10px;
    }
  }
  
  .main-content {
    flex: 1;
    display: flex;
    overflow: hidden;
  }
  
  .debug-panel {
    width: 350px;
    background: #fff;
    border-right: 1px solid #e6e6e6;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    
    .panel-header {
      padding: 10px;
      border-bottom: 1px solid #e6e6e6;
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      h3 {
        margin: 0;
        font-size: 16px;
        color: #333;
      }
    }
    
    .panel-content {
      flex: 1;
      overflow-y: auto;
      padding: 10px;
      
      .field-item {
        margin-bottom: 15px;
        border-bottom: 1px dashed #e6e6e6;
        padding-bottom: 10px;
        
        .field-header {
          display: flex;
          justify-content: space-between;
          margin-bottom: 5px;
          
          .field-label {
            font-weight: bold;
            color: #333;
          }
          
          .field-info {
            font-size: 12px;
            color: #666;
            margin-left: 8px;
          }
        }
        
        .field-warning {
          margin-top: 5px;
          margin-bottom: 8px;
        }
      }
      
      .table-editor {
        margin-top: 10px;
        border: 1px solid #ebeef5;
        border-radius: 4px;
        overflow: hidden;
        
        .add-row-btn {
          padding: 10px;
          text-align: center;
          background: #f8f8f8;
          border-top: 1px solid #e6e6e6;
        }
      }
    }
  }
  
  .canvas-container-wrapper {
    flex: 1;
    display: flex;
    overflow: hidden;
  }
  
  .empty-prompt {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
  }
  
  .canvas-container {
    flex: 1;
    position: relative;
    overflow: auto;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    
    .canvas-wrapper {
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      background: white;
      position: relative;
      
      canvas {
        display: block;
      }
    }
  }
}

.table-editor {
  margin-top: 10px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  overflow: hidden;
  
  .add-row-btn {
    padding: 10px;
    text-align: center;
    background: #f8f8f8;
    border-top: 1px solid #e6e6e6;
  }
  
  // 添加单元格输入框样式
  :deep(.cell-input) {
    .el-input__inner {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  
  .main-table {
    width: 100%;
    /* 确保固定列正确显示 */
    :deep(.el-table__fixed-right) {
      height: 100%;
      position: absolute;
      top: 0;
      right: 0;
      z-index: 10 !important;
      box-shadow: -5px 0 10px rgba(0, 0, 0, 0.12);
    }
  
    :deep(.el-table__fixed-right-patch) {
      position: absolute;
      top: 0;
      right: 0;
      background-color: #fff;
      z-index: 1 !important;
    }
  
    /* 修复操作列透视问题 */
    :deep(.el-table__fixed-right .el-table__fixed-body-wrapper) {
      background-color: #fff !important;
    }
  
    :deep(.el-table__fixed-right .el-table__cell) {
      background-color: #fff !important;
    }
  
    :deep(.el-table-fixed-column--right) {
      background-color: #fff !important;
      z-index: 1 !important;
    }
  
    :deep(.el-table-fixed-column--right.is-first-column) {
      background-color: #fff !important;
      z-index: 1 !important;
    }
  
    :deep(.el-table__fixed-right .cell) {
      background-color: #fff !important;
    }
  
    :deep(.el-table__fixed-right tr:hover .el-table__cell) {
      background-color: rgba(0, 0, 0, 0.04) !important;
    }
  
    :deep(.el-table__fixed-header-wrapper) {
      z-index: 12 !important;
    }
  }
}

/* 添加端口对话框样式 */
.port-dialog-content {
  padding: 10px 0;
  
  .port-dialog-tip {
    margin-bottom: 15px;
    color: #f56c6c;
    font-size: 14px;
  }
  
  .port-dialog-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
    gap: 10px;
  }
}
</style>

<style>
/* 全局样式，使PDF导出等待提示更明显 */
.pdf-export-loading .el-loading-spinner {
  margin-top: -30px;
}

.pdf-export-loading .el-loading-spinner .el-loading-text {
  color: #fff;
  font-size: 16px;
  margin-top: 15px;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.pdf-export-loading .el-loading-spinner .path {
  stroke: #409EFF;
  stroke-width: 5;
}

/* 添加对模板中占位符的高亮样式 */
.highlighted-placeholder {
  background-color: #e6f7ff;
  border: 1px dashed #1890ff;
  padding: 0 4px;
  border-radius: 2px;
  color: #1890ff;
}
</style> 